<template>
  <div class="index">
    <Toolbar />
    <main>
      <section class="left">
        <ComponentList />
      </section>
      <section class="center">
        <div
          class="content"
          @drop="handleDrop"
          @dragover="handleDragOver"
          @mousedown="handleMouseDown"
          @mouseup="deselectCurComponent"
        >
          <Editor />
        </div>
      </section>

      <section class="right">
        <el-tabs v-model="activeName">
          <el-tab-pane label="属性" name="attr">
            <AttrList v-if="curComponent" />
            <p v-else class="placeholder">请选择组件</p>
          </el-tab-pane>
          <!-- <el-tab-pane label="动画" name="animation">
            <AnimationList v-if="curComponent" />
                        <p v-else class="placeholder">请选择组件</p>
          </el-tab-pane> -->
          <el-tab-pane label="事件" name="events">
            <EventList v-if="curComponent" />
            <p v-else class="placeholder">请选择组件</p>
          </el-tab-pane>
        </el-tabs>
      </section>
    </main>
  </div>
</template>

<script>
import AttrList from "@/components/AttrList"; // 右侧属性列表
import EventList from "@/components/EventList"; // 右侧事件列表
import componentList from "@/custom-component/component-list"; // 左侧列表数据
import { mapState } from "vuex";
import Toolbar from "@/components/Toolbar";
import ComponentList from "@/components/ComponentList";
import Editor from "@/components/Editor/index.vue";
import { deepCopy } from "@/utils/utils";
import generateID from "@/utils/generateID";
export default {
  components: {
    Toolbar,
    ComponentList,
    Editor,
    AttrList,
    EventList,
  },
  data() {
    return {
      activeName: "attr",
    };
  },
  computed: mapState([
    "componentData",
    "editor",
    "curComponent",
    "isClickComponent",
  ]),

  mounted() {},

  methods: {
    handleDrop(e) {
      e.preventDefault();
      e.stopPropagation();
      const index = e.dataTransfer.getData("index");
      const rectInfo = this.editor.getBoundingClientRect();
      if (index) {
        const component = deepCopy(componentList[index]);
        component.style.top = e.clientY - rectInfo.y;
        component.style.left = e.clientX - rectInfo.x;
        component.id = generateID();
        this.$store.commit("addComponent", { component });
      }
    },
    handleDragOver(e) {
      e.preventDefault();
    },
    handleMouseDown(e) {
      e.stopPropagation();
      this.$store.commit("setClickComponentStatus", false);
    },
    deselectCurComponent() {
      if (!this.isClickComponent) {
        this.$store.commit("setCurComponent", { component: null, index: null });
      }
    },
  },
};
</script>
<style lang="less">
.index {
  height: 100vh;
  background: #fff;

  main {
    height: calc(100% - 64px);
    position: relative;

    .left {
      position: absolute;
      height: 100%;
      width: 200px;
      left: 0;
      top: 0;
      padding-top: 10px;
    }

    .right {
      position: absolute;
      height: 100%;
      width: 262px;
      right: 0;
      top: 0;
    }

    .center {
      margin-left: 200px;
      margin-right: 262px;
      background: #f5f5f5;
      height: 100%;
      overflow: auto;
      padding: 20px;

      .content {
        width: 100%;
        height: 100%;
        overflow: auto;
      }
    }
  }

  .placeholder {
    text-align: center;
    color: #333;
  }
}
</style>
